模板
<script>
export default {
  data() {
    return {
      originalTitle: '第一个组件',
      content1: '内容一',
      content2: '<span style="color: red">内容二</span>',
      s1: {
        color: 'purple',
        fontSize: '20px',
        //斜体
        fontStyle: 'italic',
      },
      loadTime: ''
    }
  },
  mounted() {
    this.loadTime = new Date().toLocaleString();
  }
}
</script>

<template>
  <div class="container">
    <h2 :title="`${originalTitle} - 加载时间：${loadTime}`">组件名称：{{ originalTitle }}</h2>
    <div :style="s1">v-bind测试</div>
    <p v-text="content1" :style="{ color: s1.color }"></p>
    <p v-html="content2"></p>
  </div>
</template>

<style scoped>
.container {
  margin:  auto;
  margin-top: 20px;
  width: 500px;
  height: 100px;
  background-color: #64edd8;
  border-radius: 5px;
  text-align: center;
  padding-top: 10px;
}
</style>
